<template>
  <div class="guide-detail" v-loading="loading">
    <!-- 头部信息 -->
    <div class="guide-header">
      <div class="container">
        <!-- 面包屑 -->
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/guides' }">旅游攻略</el-breadcrumb-item>
            <el-breadcrumb-item>{{ guide.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <h1 class="guide-title">{{ guide.title }}</h1>

        <!-- 作者信息 -->
        <div class="author-bar">
          <div class="author-info" @click="goToUserProfile(guide.author?.id)">
            <img :src="guide.author?.avatar" :alt="guide.author?.name" class="author-avatar" />
            <div class="author-details">
              <div class="author-name">{{ guide.author?.name }}</div>
              <div class="publish-time">{{ guide.publishTime }}</div>
            </div>
          </div>
          <div class="guide-stats">
            <span class="stat-item">
              <el-icon><View /></el-icon>
              {{ guide.views }}
            </span>
            <span class="stat-item">
              <el-icon><ChatDotRound /></el-icon>
              {{ guide.comments }}
            </span>
            <span class="stat-item">
              <el-icon><Star /></el-icon>
              {{ guide.likes }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容 -->
    <div class="container">
      <div class="detail-layout">
        <!-- 左侧内容 -->
        <article class="guide-content">
          <!-- 封面图 -->
          <div class="cover-image">
            <img :src="guide.cover" :alt="guide.title" />
          </div>

          <!-- 文章内容 -->
          <div class="article-body" v-html="guide.content"></div>

          <!-- 标签 -->
          <div class="tags-section" v-if="guide.tags?.length">
            <span class="tag" v-for="tag in guide.tags" :key="tag">{{ tag }}</span>
          </div>

          <!-- 互动栏 -->
          <div class="action-bar">
            <el-button :icon="Star" :type="guide.isLiked ? 'primary' : 'default'" @click="handleLike">
              {{ guide.isLiked ? '已点赞' : '点赞' }} ({{ guide.likes }})
            </el-button>
            <el-button :icon="Collection">收藏</el-button>
            <el-button :icon="Share">分享</el-button>
          </div>

          <!-- 评论区 -->
          <CommentSection
            :comments="comments"
            :total-comments="guide.comments"
            @submit="handleComment"
            @reply="handleReply"
            @like="handleLikeComment"
          />
        </article>

        <!-- 右侧边栏 -->
        <aside class="sidebar">
          <!-- 作者卡片 -->
          <div class="sidebar-card author-card">
            <img :src="guide.author?.avatar" :alt="guide.author?.name" class="author-avatar-large" />
            <h3 class="author-name-large">{{ guide.author?.name }}</h3>
            <p class="author-bio">{{ guide.author?.bio || '这个人很懒，什么都没留下' }}</p>
            <div class="author-stats">
              <div class="stat">
                <div class="stat-value">{{ guide.author?.guides || 0 }}</div>
                <div class="stat-label">攻略</div>
              </div>
              <div class="stat">
                <div class="stat-value">{{ guide.author?.followers || 0 }}</div>
                <div class="stat-label">粉丝</div>
              </div>
            </div>
            <el-button type="primary" class="follow-btn">关注</el-button>
          </div>

          <!-- 相关攻略 -->
          <div class="sidebar-card">
            <h3 class="card-title">相关攻略</h3>
            <div class="related-guides">
              <div
                v-for="item in relatedGuides"
                :key="item.id"
                class="related-card"
                @click="goToGuide(item.id)"
              >
                <div class="related-cover">
                  <img :src="item.cover" :alt="item.title" />
                </div>
                <h4 class="related-title">{{ item.title }}</h4>
                <div class="related-meta">
                  <el-icon><View /></el-icon>
                  {{ item.views }}
                </div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { View, Star, Collection, Share } from '@element-plus/icons-vue'
import CommentSection from '@/components/common/CommentSection.vue'
// import { getGuideDetail, likeGuide, addComment } from '@/api/travel/index.js'

const route = useRoute()
const router = useRouter()

const loading = ref(false)

// 攻略详情
const guide = ref({
  id: '',
  title: '',
  cover: '',
  content: '',
  author: {
    name: '',
    avatar: '',
    bio: '',
    guides: 0,
    followers: 0
  },
  publishTime: '',
  views: 0,
  comments: 0,
  likes: 0,
  isLiked: false,
  tags: []
})

// 评论列表
const comments = ref([
  {
    id: 1,
    user: {
      name: '旅行爱好者',
      avatar: 'https://i.pravatar.cc/150?img=31'
    },
    content: '写得太好了！正好下个月要去，这篇攻略太及时了，收藏了！',
    time: '2小时前',
    likes: 12,
    isLiked: false
  },
  {
    id: 2,
    user: {
      name: '小明',
      avatar: 'https://i.pravatar.cc/150?img=32'
    },
    content: '请问住宿推荐的那几家酒店现在还能订到吗？',
    time: '5小时前',
    likes: 5,
    isLiked: false
  },
  {
    id: 3,
    user: {
      name: '旅游达人',
      avatar: 'https://i.pravatar.cc/150?img=33'
    },
    content: '作者写得很详细，特别是美食部分，每一家都标注了地址和营业时间，太贴心了！',
    time: '1天前',
    likes: 23,
    isLiked: false
  }
])

// 相关攻略
const relatedGuides = ref([
  {
    id: 2,
    title: '成都美食地图 | 本地人推荐的30家馆子',
    cover: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=400&q=80',
    views: '18.2k'
  },
  {
    id: 3,
    title: '西藏自驾游装备清单 | 新手必看',
    cover: 'https://images.unsplash.com/photo-1519904981063-b0cf448d479e?w=400&q=80',
    views: '25.8k'
  },
  {
    id: 4,
    title: '丽江古城住宿推荐 | 10家高性价比客栈',
    cover: 'https://images.unsplash.com/photo-1508804185872-d7badad00f7d?w=400&q=80',
    views: '9.6k'
  }
])

// 加载攻略详情
const loadGuideDetail = async () => {
  loading.value = true
  try {
    const guideId = route.params.id
    
    // TODO: 调用API获取攻略详情
    // const res = await getGuideDetail(guideId)
    // guide.value = res.data
    
    // 模拟数据
    guide.value = {
      id: guideId,
      title: '三亚5天4晚完美攻略 | 人均3000元玩转海岛',
      cover: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=1200&q=80',
      content: `
        <h2>行程概览</h2>
        <p>这次三亚之行总共5天4晚，人均花费约3000元（不含往返机票）。行程安排既有热门景点，也有小众海滩，既能享受海岛风光，又能体验当地美食。</p>
        
        <h2>Day 1：抵达三亚 - 三亚湾</h2>
        <p>上午抵达三亚凤凰机场，乘坐机场大巴前往酒店（约40分钟，票价15元）。下午在三亚湾海滩漫步，欣赏日落。晚上在第一市场品尝海鲜大餐。</p>
        <p><strong>住宿推荐：</strong>三亚湾附近的民宿，价格实惠，步行5分钟到海边。</p>
        <p><strong>美食推荐：</strong>第一市场的海鲜加工店，推荐四川小胡子海鲜加工店，性价比高。</p>
        
        <h2>Day 2：亚龙湾 - 天堂森林公园</h2>
        <p>早上前往亚龙湾，这里的海水清澈见底，沙滩细腻。中午在亚龙湾附近用餐，下午游览天堂森林公园，这里是《非诚勿扰2》的取景地。</p>
        <p><strong>门票：</strong>天堂森林公园门票175元，建议提前在网上购买，可以便宜20-30元。</p>
        
        <h2>Day 3：蜈支洲岛</h2>
        <p>全天游览蜈支洲岛，这是三亚最美的海岛。可以体验潜水、摩托艇等水上项目。岛上的海鲜餐厅价格较贵，建议自带干粮。</p>
        <p><strong>交通：</strong>从市区打车到码头约80元，也可以报一日游团，包含往返接送和门票。</p>
        
        <h2>Day 4：南山寺 - 天涯海角</h2>
        <p>上午参观南山寺，下午前往天涯海角。这两个景点都是三亚的经典景点，虽然有些商业化，但还是值得一去。</p>
        
        <h2>Day 5：自由活动 - 返程</h2>
        <p>上午在酒店附近的海滩休息，中午退房，下午前往机场返程。</p>
        
        <h2>费用明细</h2>
        <ul>
          <li>住宿：4晚约800元（人均200元/晚）</li>
          <li>餐饮：约600元</li>
          <li>门票：约500元</li>
          <li>交通：约400元</li>
          <li>其他：约700元</li>
        </ul>
        <p><strong>总计：</strong>约3000元/人</p>
        
        <h2>实用贴士</h2>
        <ol>
          <li>三亚全年都适合旅游，但11月-次年3月是旺季，价格较高。</li>
          <li>防晒很重要！建议带SPF50+的防晒霜，每2小时补涂一次。</li>
          <li>海鲜市场买海鲜要货比三家，注意缺斤少两。</li>
          <li>景区门票提前在网上购买可以便宜不少。</li>
          <li>打车建议使用滴滴，避免被宰。</li>
        </ol>
      `,
      author: {
        id: '11',
        name: '旅行达人小王',
        avatar: 'https://i.pravatar.cc/150?img=11',
        bio: '资深旅行博主，走遍大江南北，分享最实用的旅行攻略',
        guides: 128,
        followers: 5420
      },
      publishTime: '2024-01-15 10:30',
      views: '12.5k',
      comments: 328,
      likes: 1234,
      isLiked: false,
      tags: ['三亚', '海岛游', '亲子游', '美食', '攻略']
    }
  } catch (error) {
    console.error('加载攻略详情失败:', error)
    ElMessage.error('加载失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 点赞
const handleLike = async () => {
  try {
    // TODO: 调用API
    // await likeGuide(guide.value.id)
    
    guide.value.isLiked = !guide.value.isLiked
    guide.value.likes += guide.value.isLiked ? 1 : -1
    ElMessage.success(guide.value.isLiked ? '点赞成功' : '取消点赞')
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// 发表评论
const handleComment = async (content) => {
  try {
    // TODO: 调用API
    // await addComment({
    //   guideId: guide.value.id,
    //   content: content
    // })
    
    // 模拟添加评论到列表
    comments.value.unshift({
      id: Date.now(),
      user: {
        name: '当前用户',
        avatar: 'https://i.pravatar.cc/150?img=50'
      },
      content: content,
      time: '刚刚',
      likes: 0,
      isLiked: false
    })
    guide.value.comments++
  } catch (error) {
    throw error
  }
}

// 回复评论
const handleReply = (comment) => {
  console.log('回复评论:', comment)
}

// 点赞评论
const handleLikeComment = (comment) => {
  comment.isLiked = !comment.isLiked
  comment.likes += comment.isLiked ? 1 : -1
  ElMessage.success(comment.isLiked ? '点赞成功' : '取消点赞')
}

// 跳转到其他攻略
const goToGuide = (id) => {
  router.push(`/guides/${id}`)
}

// 跳转到用户主页
const goToUserProfile = (userId) => {
  if (userId) {
    const profileUrl = window.location.origin + `/user/profile/${userId}`
    window.open(profileUrl, '_blank')
  }
}

// 监听路由参数变化
watch(() => route.params.id, (newId) => {
  if (newId) {
    loadGuideDetail()
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }
})

onMounted(() => {
  loadGuideDetail()
})
</script>

<style scoped lang="less">
.guide-detail {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 80px;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

// 头部
.guide-header {
  background: #fff;
  padding: 32px 0 24px;
  margin-bottom: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.breadcrumb {
  margin-bottom: 24px;

  :deep(.el-breadcrumb) {
    font-size: 14px;
  }
}

.guide-title {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 24px 0;
  line-height: 1.4;
}

.author-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: opacity 0.3s;

  &:hover {
    opacity: 0.8;
  }
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.author-details {
  .author-name {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
  }

  .publish-time {
    font-size: 13px;
    color: #999;
  }
}

.guide-stats {
  display: flex;
  gap: 24px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;

  .el-icon {
    font-size: 16px;
  }
}

// 布局
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
}

// 文章内容
.guide-content {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.cover-image {
  width: 100%;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 32px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.article-body {
  font-size: 16px;
  line-height: 1.8;
  color: #333;

  :deep(h2) {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 32px 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
  }

  :deep(p) {
    margin: 16px 0;
  }

  :deep(strong) {
    color: #ff6b6b;
    font-weight: 600;
  }

  :deep(ul), :deep(ol) {
    margin: 16px 0;
    padding-left: 24px;
  }

  :deep(li) {
    margin: 8px 0;
  }
}

// 标签
.tags-section {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #f0f0f0;
}

.tag {
  padding: 8px 16px;
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
  border-radius: 20px;
  font-size: 14px;
}

// 互动栏
.action-bar {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #f0f0f0;
}

// 侧边栏
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

// 作者卡片
.author-card {
  text-align: center;
}

.author-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
}

.author-name-large {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.author-bio {
  font-size: 13px;
  color: #999;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.author-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;

  .stat {
    text-align: center;

    .stat-value {
      font-size: 20px;
      font-weight: 700;
      color: #ff6b6b;
      margin-bottom: 4px;
    }

    .stat-label {
      font-size: 13px;
      color: #999;
    }
  }
}

.follow-btn {
  width: 100%;
}

// 相关攻略
.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.related-guides {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.related-card {
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
  overflow: hidden;
  background: #f8f9fa;

  &:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
}

.related-cover {
  width: 100%;
  height: 120px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }
}

.related-card:hover .related-cover img {
  transform: scale(1.05);
}

.related-title {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0;
  padding: 12px 12px 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #999;
  padding: 0 12px 12px;
}

// 响应式
@media (max-width: 1200px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .guide-title {
    font-size: 24px;
  }

  .author-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .guide-content {
    padding: 24px 20px;
  }

  .cover-image {
    height: 250px;
  }

  .sidebar {
    grid-template-columns: 1fr;
  }
}
</style>
